<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>layui主题修改</title>
		<link rel="stylesheet" href="./css/reset.css" />
		<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="./css/ltheme_css.css" />


	</head>

	<body>
		<div class="ltheme_box layui-form">
			<div class="layui-card">
				<div class="layui-card-body layui-row layui-col-space10">
					<div class="layui-col-md12">
						<!-- <input type="text" name="title" placeholder="驾驶员" autocomplete="off" class="layui-input"> -->
						<div class="layui-form-item">
							<label class="layui-form-label">选择颜色</label>
							<div class="layui-input-block">
								<div id="colorpicker_box"></div>
							</div>
						</div>
					</div>
					<div class="layui-col-md12">
						<div class="layui-form-item">
							<label class="layui-form-label">生成多个颜色对应文件名</label>
							<div class="layui-input-block">
								<input type="text" id="color_list_name" class="layui-input" placeholder="skin-red,skin-blue">
							</div>
						</div>
					</div>
					<div class="layui-col-md12">
						<div class="layui-form-item">
							<label class="layui-form-label">生成多个颜色</label>
							<div class="layui-input-block">
								<input type="text" id="color_list" class="layui-input" placeholder="#f40,#fcf">
							</div>
						</div>
					</div>
					<div class="layui-col-md12">
						<!-- <input type="text" name="title" placeholder="驾驶员" autocomplete="off" class="layui-input"> -->
						<div class="layui-form-item">
							<div class="layui-input-block">
								<div class="layui-btn" id="ltheme_dl2">
									预设样式生成下载
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>


			<div class="layui-card">
				<div class="layui-card-body layui-row layui-col-space10">
					<pre class="layui-code" id="pre_html">

                </pre>
				</div>
			</div>


		</div>

		<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layui-v2.5.6/layui.all.js"> </script>
		<script type="text/javascript">
			var bgColor = '', // 颜色
				strHtml = ''; // 下载样式
			window.indexMethod = (function() {
				return {
					init: function() { // 初始化
						// 初始化表单样式
						layui.form.render();
						// 初始化颜色选择器
						layui.colorpicker.render({
							elem: '#colorpicker_box', //绑定元素
							change: function(color) {
								bgColor = color;
							}
						});
						// 代码修饰器
						layui.code({
							elem: 'pre', //默认值为.layui-code
							title: 'layui_theme'
						});

						// 绑定生成按钮
						$("#ltheme_sub").on('click', function() {
							indexMethod.pre_html(bgColor);

						})

						// 下载文件
						$("#ltheme_dl").on('click', function() {
							var color_list = $("#color_list_name").val();
							
							var color_list = $("#color_list").val();
							if(color_list){
								color_list=color_list.split(',');
								if(color_list.length>0){
									color_list.map((item,index)=>{
										console.log(item);
										var strHtml = indexMethod.pre_html(item);
										indexMethod.file_dl(strHtml, 'ltheme');
									})
								}
							}else{
								indexMethod.file_dl(strHtml, 'ltheme');
							}

							
							
						})
						
						// 下载文件 用默认的样式
						$("#ltheme_dl2").on('click', function() {
							var objList=[
								{
									name:'skin-black2',
									color:'#263238'
								},
								{
									name:'skin-blue',
									color:'#367fa9'
								},
								{
									name:'skin-purple',
									color:'#605ca8'
								},
								{
									name:'skin-green',
									color:'#00a65a'
								},
								{
									name:'skin-red',
									color:'#dd4b39'
								},
								{
									name:'skin-yellow',
									color:'#f39c12'
								},
								{
									name:'skin-blue-light',
									color:'#2A579A'
								},
								{
									name:'skin-black-light2',
									color:'#303643'
								},
								{
									name:'skin-purple-light',
									color:'#605ca8'
								},
								{
									name:'skin-green-light',
									color:'#00a65a'
								},
								{
									name:'skin-red-light',
									color:'#f40'
								},
								{
									name:'skin-yellow-light',
									color:'#dd4b39'
								},
								{
									name:'skin-blue-light2',
									color:'#1890ff'
								},
							];
							
							objList.map((item,index)=>{
								var strHtml = indexMethod.pre_html2(item.color);
								//if(item.name == 'skin-blue-light2'){
									indexMethod.file_dl(strHtml, item.name);
								//}
								
							})
						
							
							
						})
						

					},
					pre_html2: function(color) { // layui 样式 jeesite1.26样式
					let tdate = new Date();
					// layui 弹出层样式
					var str =
`
/* 生成日期${tdate} */

/* jeesite1.26样式 */
/* 主题样式覆盖 - ${color} */
.navbar-inner{
	background-color: ${color};
	border: 1px solid ${color};
}
.navbar .nav>.active>a, .navbar .nav>.active>a:hover, .navbar .nav>.active>a:focus{
    /* background-color: #2c3b41; */
    background: rgba(0,0,0,0.1);
}
.navbar .nav>li>a:focus, .navbar .nav>li>a:hover{
	/* background-color: #2c3b41; */
	background: rgba(0,0,0,0.1);
}
.nav-tabs>.active>a:hover{
	BACKGROUND: ${color};
	background: ${color};
}
.nav-tabs>.active>a{
	background: ${color};
	border-radius: 0;
}
.nav>li>a:hover, .nav>li>a:focus{
	color: ${color};
}
.btn-primary{
	background-color: ${color};
	background-image: linear-gradient(to bottom, ${color}, ${color});
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled]{
	background-color: ${color};
}
.nav-list>.active>a, .nav-list>.active>a:hover, .nav-list>.active>a:focus{
	color: ${color};
    border-left: 4px solid ${color};
}
.accordion-inner .nav-list li a:hover, .accordion-inner .nav-list li a:focus{
    color: ${color};
    border-left: 4px solid ${color};
}
#left .nav_select .accordion-toggle{
	color: ${color};
}
.pagination ul>li>a:hover, .pagination ul>li>a:focus, .pagination ul>.active>a, .pagination ul>.active>span{
	background-color: ${color};
}
div.jbox .jbox-button{
	border: ${color} 1px solid;
    color: ${color};
}
.navbar .nav li.dropdown.open>.dropdown-toggle, .navbar .nav li.dropdown.active>.dropdown-toggle, .navbar .nav li.dropdown.open.active>.dropdown-toggle{
	background-color: ${color};
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a{
	background-color: ${color};
}
#footer{
	border-top: 2px solid ${color}!important;
}


/* 主题切换--侧边栏样式 */
#left.index_left{
	background-color: #263238;
}
#left.index_left .accordion-group .accordion-toggle{
	color:#abb1b7;
}
#left.index_left .nav-list li a{
	color:#abb1b7;
	text-shadow: none;
}
#left.index_left .nav_select .accordion-toggle{
	color:#fff;
}

#left.index_left .accordion-inner .nav-list li a:hover, .accordion-inner .nav-list li a:focus{
	 background: #2c3b41;
	 color:#fff;
}
#left.index_left .accordion-group{
	border:0;
}
#left.index_left .accordion-inner{
	border:0;
}

#left.index_left .nav-list>.active>a, .nav-list>.active>a:hover, .nav-list>.active>a:focus{
	border-left: 4px solid ${color};
    background: ${color};
    color: #fff;
    text-shadow: none;
}
#header{
	margin:0!important;
}
.container-fluid{
	padding: 0!important;
}
					
/* layui样式 */
/* 默认按钮颜色 */
.layui-btn{
	background-color: ${color}!important;
}
/* 表单-单选按钮 */
.layui-form-radio>i:hover, .layui-form-radioed>i{
	color:${color}!important;
}
/* 表单-复选按钮 */
.layui-form-checked span, .layui-form-checked:hover span{
	background-color:${color}!important;
}
.layui-form-checked i, .layui-form-checked:hover i{
	color:${color}!important;
}
/* 表单-下拉列表 */
.layui-form-select dl dd.layui-this{
	background-color: ${color}!important;
}
/* 日期控件 */
.layui-laydate .layui-this{
	background-color: ${color}!important;
}
.layui-laydate-footer span:hover{
	color: ${color}!important;
}
/* 选项卡 */
.layui-tab-brief>.layui-tab-title .layui-this{
	color: ${color}!important;
}
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
	border-bottom: 2px solid ${color}!important;
}
/* 树控件 */
.layui-form-checked[lay-skin=primary] i{
	border-color: ${color}!important;
	background-color: ${color}!important;
}
.layui-form-checkbox[lay-skin=primary]:hover i{
	border-color: ${color}!important;
}
/* 表格 */
/* 
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even){
	background-color: ${color}!important;
	color: #fff!important; 
}
.layui-table-sort .layui-table-sort-asc{
	 border-bottom-color:#fff!important; 
}
.layui-table-sort .layui-table-sort-desc{
	border-top-color:#fff!important; 
}

.layui-laypage .layui-laypage-curr .layui-laypage-em{
	background-color: ${color}!important;
}
.layui-laypage a:hover{
	color: ${color}!important;
}
.layui-laypage input:focus, .layui-laypage select:focus{
	border-color: ${color}!important;
}
*/






/* 数广样式 - ${color}  */
.select2-results .select2-highlighted{
	background-color: ${color};
}


/* 阴影去除，边框修正 */
.form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea,.form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input, .form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend, .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append{
	text-shadow: none!important;
	box-shadow: none!important;
	border-radius: 0!important;
}
.btn{
	text-shadow: none!important;
	box-shadow: none!important;
	border-radius: 0!important;
}
.nav-list>li>a, .nav-list .nav-header{
	text-shadow:none!important;
}
.select2-container .select2-choice{
	box-shadow: none!important;
    border-radius: 0!important;
}
.select2-search input{
	box-shadow: none!important;
    border-radius: 0!important;
}
/* tab 样式修改 */
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus{
	border-radius: 0!important;
}


/* .jericho_tabs{
	background:#fff!important;
}
.jericho_tab .tab_pages .tab_unselect .tab_left{
	background:#fff!important;
}
.jericho_tab .tab_pages .tab_unselect .tab_right{
	background:#fff!important;
}
.jericho_tab .tab_pages .tab_selected{
	border:1px solid #ccc;
	border-bottom-color:#fff;
}
.jericho_tab .tab_pages .tab_selected div.tab_left{
	background:#fff!important;
}
.jericho_tab .tab_pages .tab_selected div.tab_right{
	background:#fff!important;
}
.jericho_tab .tab_pages{
	background:#fff!important;
	border-bottom:1px solid #ccc;
} */
/* 样式规范修改 */
.menu.active {
	/* background: #2779F4; */
	
}
.jericho_tab .tab_pages .tabs {
	height:41px!important;
}

.jericho_tab .tab_pages .tab_selected div{
	height:41px!important;
	line-height:44px!important;
}
.jericho_tab .tab_pages .tab_selected {
	color: #fff!important;
	background: ${color}!important;
	border: 0!important;
	position: relative!important;
}
.jericho_tab .tab_pages .tab_selected div.tab_right {
	background: none!important;
}
.jericho_tab .tab_pages .tab_selected div.tab_left{
	background: none!important;
}
.jericho_tab .tab_pages .tab_selected .tab_text {
	color: #fff!important;
}
/* .jericho_tab .tab_pages .tab_selected::after{
	content:' ';
	position: absolute;
	left: 0;
	bottom: 0px;
	height: 8px;
	width: 100%;
	background-color: #4189FF;
} */
.jericho_tab .tab_pages .tab_unselect {
	position: relative!important;
	background: #E2E2E2!important;
}

.jericho_tab .tab_pages .tab_unselect .tab_text {
	color: #112534!important;
}

.jericho_tab .tab_pages {
	background: none!important;
	border-bottom: 1px solid #C4C4C4!important;
}

.jericho_tab .tab_pages .tab_unselect div {
	line-height: 39px!important;
	height: 39px!important;
	background:#fff!important;
}
.jericho_tab .tab_pages .tab_unselect .tab_left .tab_close a{
	/* margin-top: 10px; */
	margin-top: 15px!important;
	
}
.jericho_tab .tab_pages .tab_selected .tab_left .tab_close a{
	margin-top: 17px!important;
}
.nav-tabs>li>a{
	border-radius: 0;
}


`;
					
											strHtml = str;
											$("#pre_html").html(str)
											return str;
					
										},
					file_dl: function(content, filename) {
						// 创建a标签
						let linkNode = document.createElement('a');
						linkNode.download = filename;
						linkNode.style.display = 'none';
						// 利用Blob对象将字符内容转变成二进制数据
						// let blob = new Blob([content]);
						let blob = new Blob([content], { type: 'text/css'});
						linkNode.href = URL.createObjectURL(blob);
						// 点击
						document.body.appendChild(linkNode);
						linkNode.click();
						// 移除
						document.body.removeChild(linkNode);

					}

				}
			})();

			$(document).ready(function() {
				indexMethod.init();
			})
		</script>

	</body>

</html>
